
import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';

import List from './app/creation/index';
import Edit from './app/edit/index';
import Login from './app/account/login';
import Account from './app/account/index';
import {Navigator} from 'react-native-deprecated-custom-components';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TabBarIOS,
  AsyncStorage,
  AlertIOS
} from 'react-native';

var imoocApp = React.createClass({

  getInitialState: function () {
    return {
      user: null,
      selectedTab: 'list',
      logined: true
    };
  },

  componentDidMount(){
     this._aysncAppStatus()
  },

  _aysncAppStatus(){
    var that = this    
    AsyncStorage.getItem('user')
      .then((data)=>{
        var user
        var newState = {}
        
        if(data){
          user=JSON.parse(data)
        }

        if (user && user.acessToken){
          newState.user = user
          newState.logined = true
        }else{
          newState.logined = false
        }

        that.setState(newState)
      })
  },

  _afterLogin(user){
    var that = this
    user = JSON.stringify(user)

    AsyncStorage.setItem('user',user)
      .then(()=>{
        that.setState({
          logined: true,
          user: user
        })
        var logined = JSON.stringify(that.state.logined)
      })
  },

  render: function () {

    if(!this.state.logined){
      return <Login afterLogin={this._afterLogin}/>
    }
    return (
      <TabBarIOS
        tintColor="#EE735C">
        <Icon.TabBarItem
          iconName="ios-videocam-outline"
          selectedIconName="ios-videocam"
          selected={this.state.selectedTab === 'list'}
          onPress={() => {
            this.setState({
              selectedTab: 'list',
            });
          }}>
          <Navigator
            initialRoute={{
              name: 'list',
              component: List
            }}
            configureScene={(route) => {
              return Navigator.SceneConfigs.FloatFromRight
            }}
            renderScene={(route, navigator) => {
              var Component = route.component

              return <Component {...route.params} navigator={navigator} />
            }}
          />
        </Icon.TabBarItem>
        <Icon.TabBarItem
          iconName="ios-recording-outline"
          selectedIconName="ios-recording"
          selected={this.state.selectedTab === 'edit'}
          onPress={() => {
            this.setState({
              selectedTab: 'edit'
            });
          }}>
          <Edit />
        </Icon.TabBarItem>
        <Icon.TabBarItem
          iconName="ios-more-outline"
          selectedIconName="ios-more"
          selected={this.state.selectedTab === 'account'}
          onPress={() => {
            this.setState({
              selectedTab: 'account'
            });
          }}>
          <Account />
        </Icon.TabBarItem>
      </TabBarIOS>
    );
  },

});

AppRegistry.registerComponent('gougoushuo', () => imoocApp);
